/*
 * @Author: 韩富贵 hanxzi@163.com
 * @Date: 2022-08-17 19:09:12
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-01-10 14:59:03
 */
import React, { useState, useEffect } from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import cloneDeep from 'lodash/cloneDeep';
import merge from 'lodash/merge';
const defaultOption = {};
const planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
const geoCoordMap = {
  "北京": [116.404184, 39.914578],
  "美国洛杉矶": [-118.24311, 34.052713],
  "香港邦泰": [114.195466, 22.282751],
  "美国芝加哥": [-87.801833, 41.870975],
  "加纳库马西": [-4.62829, 7.72415],
  "英国曼彻斯特": [-1.657222, 51.886863],
  "德国汉堡": [10.01959, 54.38474],
  "哈萨克斯坦阿拉木图": [45.326912, 41.101891],
  "俄罗斯伊尔库茨克": [89.116876, 67.757906],
  "埃及达米埃塔": [31.815593, 31.418032],
  "西班牙巴塞罗纳": [2.175129, 41.385064],
  "柬埔寨金边": [104.88659, 11.545469],
  "意大利米兰": [9.189948, 45.46623],
  "乌拉圭蒙得维的亚": [-56.162231, -34.901113],
  "莫桑比克马普托": [32.608571, -25.893473],
  "阿尔及利亚阿尔及尔": [3.054275, 36.753027],
  "阿联酋迪拜": [55.269441, 25.204514],
  "匈牙利布达佩斯": [17.108519, 48.179162],
  "澳大利亚悉尼": [150.993137, -33.675509],
  "美国加州": [-121.910642, 41.38028],
  "澳大利亚墨尔本": [144.999416, -37.781726],
  "墨西哥": [-99.094092, 19.365711],
  "加拿大温哥华": [-123.023921, 49.311753],
  "阿富汗": [69.11, 34.28],
  "阿尔巴尼亚": [19.49, 41.18],
  "阿尔及利亚": [3.08, 36.42],
  "美属萨摩亚": [-170.43, -14.16],
  "安道尔": [1.32, 42.31],
  "安哥拉": [13.15, -8.50],
  "安提瓜和巴布达": [-61.48, 17.20],
  "阿根廷": [-60.00, -36.30],
  "亚美尼亚": [44.31, 40.10],
  "阿鲁巴": [-70.02, 12.32],
  "澳大利亚": [149.08, -35.15],
  "奥地利": [16.22, 48.12],
  "阿塞拜疆": [49.56, 40.29],
  "巴哈马": [-77.20, 25.05],
  "巴林": [50.30, 26.10],
  "孟加拉国": [90.26, 23.43],
  "巴巴多斯": [-59.30, 13.05],
  "白俄罗斯": [27.30, 53.52],
  "比利时": [4.21, 50.51],
  "伯利兹": [-88.30, 17.18],
  "贝宁": [2.42, 6.23],
  "不丹": [89.45, 27.31],
  "玻利维亚": [-68.10, -16.20],
  "波斯尼亚和黑塞哥维那": [18.26, 43.52],
  "博茨瓦纳": [25.57, -24.45],
  "巴西": [-47.55, -15.47],
  "英属维尔京群岛": [-64.37, 18.27],
  "文莱": [115.00, 4.52],
  "保加利亚": [23.20, 42.45],
  "布基纳法索": [-1.30, 12.15],
  "布隆迪": [29.18, -3.16],
  "柬埔寨": [104.55, 11.33],
  "喀麦隆": [11.35, 3.50],
  "加拿大": [-75.42, 45.27],
  "佛得角": [-23.34, 15.02],
  "开曼群岛": [-81.24, 19.20],
  "中非共和国": [18.35, 4.23],
  "乍得": [14.59, 12.10],
  "智利": [-70.40, -33.24],
  "中国": [116.20, 39.55],
  "哥伦比亚": [-74.00, 4.34],
  "科摩罗": [43.16, -11.40],
  "刚果": [15.12, -4.09],
  "哥斯达黎加": [-84.02, 9.55],
  "科特迪瓦": [-5.17, 6.49],
  "克罗地亚": [15.58, 45.50],
  "古巴": [-82.22, 23.08],
  "塞浦路斯": [33.25, 35.10],
  "捷克共和国": [14.22, 50.05],
  "朝鲜": [125.30, 39.09],
  "刚果(扎伊尔)": [15.15, -4.20],
  "丹麦": [12.34, 55.41],
  "吉布提": [42.20, 11.08],
  "多米尼加": [-61.24, 15.20],
  "多米尼加共和国": [-69.59, 18.30],
  "东帝汶": [125.34, -8.29],
  "厄瓜多尔": [-78.35, -0.15],
  "埃及": [31.14, 30.01],
  "萨尔瓦多": [-89.10, 13.40],
  "赤道几内亚": [8.50, 3.45],
  "厄立特里亚": [38.55, 15.19],
  "爱沙尼亚": [24.48, 59.22],
  "埃塞俄比亚": [38.42, 9.02],
  "福克兰群岛(马尔维纳斯群岛)": [-59.51, -51.40],
  "法罗群岛": [-6.56, 62.05],
  "斐济": [178.30, -18.06],
  "芬兰": [25.03, 60.15],
  "法国": [2.20, 48.50],
  "法属圭亚那": [-52.18, 5.05],
  "法属波利尼西亚": [-149.34, -17.32],
  "加蓬": [9.26, 0.25],
  "冈比亚": [-16.40, 13.28],
  "格鲁吉亚": [44.50, 41.43],
  "德国": [13.25, 52.30],
  "加纳": [-0.06, 5.35],
  "希腊": [23.46, 37.58],
  "格陵兰": [-51.35, 64.10],
  "瓜德罗普岛": [-61.44, 16.00],
  "危地马拉": [-90.22, 14.40],
  "根西岛": [-2.33, 49.26],
  "几内亚": [-13.49, 9.29],
  "几内亚比绍": [-15.45, 11.45],
  "圭亚那": [-58.12, 6.50],
  "海地": [-72.20, 18.40],
  "赫德岛和麦当劳群岛": [74.00, -53.00],
  "洪都拉斯": [-87.14, 14.05],
  "匈牙利": [19.05, 47.29],
  "冰岛": [-21.57, 64.10],
  "印度": [77.13, 28.37],
  "印度尼西亚": [106.49, -6.09],
  "伊朗": [51.30, 35.44],
  "伊拉克": [44.30, 33.20],
  "爱尔兰": [-6.15, 53.21],
  "以色列": [35.12, 31.47],
  "意大利": [12.29, 41.54],
  "牙买加": [-76.50, 18.00],
  "约旦": [35.52, 31.57],
  "哈萨克斯坦": [71.30, 51.10],
  "肯尼亚": [36.48, -1.17],
  "基里巴斯": [173.00, 1.30],
  "科威特": [48.00, 29.30],
  "吉尔吉斯斯坦": [74.46, 42.54],
  "老挝": [102.36, 17.58],
  "拉脱维亚": [24.08, 56.53],
  "黎巴嫩": [35.31, 33.53],
  "莱索托": [27.30, -29.18],
  "利比里亚": [-10.47, 6.18],
  "阿拉伯利比亚民众国": [13.07, 32.49],
  "列支敦士登": [9.31, 47.08],
  "立陶宛": [25.19, 54.38],
  "卢森堡": [6.09, 49.37],
  "马达加斯加": [47.31, -18.55],
  "马拉维": [33.48, -14.00],
  "马来西亚": [101.41, 3.09],
  "马尔代夫": [73.28, 4.00],
  "马里": [-7.55, 12.34],
  "马耳他": [14.31, 35.54],
  "马提尼克岛": [-61.02, 14.36],
  "毛里塔尼亚": [57.30, -20.10],
  "马约特岛": [45.14, -12.48],
  "密克罗尼西亚(联邦) ": [158.09, 6.55],
  "摩尔多瓦共和国": [28.50, 47.02],
  "莫桑比克": [32.32, -25.58],
  "缅甸": [96.20, 16.45],
  "纳米比亚": [17.04, -22.35],
  "尼泊尔": [85.20, 27.45],
  "荷兰": [4.54, 52.23],
  "荷属安的列斯": [-69.00, 12.05],
  "新喀里多尼亚": [166.30, -22.17],
  "新西兰": [174.46, -41.19],
  "尼加拉瓜": [-86.20, 12.06],
  "尼日尔": [2.06, 13.27],
  "尼日利亚": [7.32, 9.05],
  "诺福克岛": [168.43, -45.20],
  "北马里亚纳群岛": [145.45, 15.12],
  "挪威": [10.45, 59.55],
  "阿曼": [58.36, 23.37],
  "巴基斯坦": [73.10, 33.40],
  "帕劳": [134.28, 7.20],
  "巴拿马": [-79.25, 9.00],
  "巴布亚新几内亚": [147.08, -9.24],
  "巴拉圭": [-57.30, -25.10],
  "秘鲁": [-77.00, -12.00],
  "菲律宾": [121.03, 14.40],
  "波兰": [21.00, 52.13],
  "葡萄牙": [-9.10, 38.42],
  "波多黎各": [-66.07, 18.28],
  "卡塔尔": [51.35, 25.15],
  "韩国": [126.58, 37.31],
  "罗马尼亚": [26.10, 44.27],
  "俄罗斯": [37.35, 55.45],
  "卢旺达": [30.04, -1.59],
  "圣基茨和尼维斯": [-62.43, 17.17],
  "圣卢西亚": [-60.58, 14.02],
  "圣皮埃尔和密克隆": [-56.12, 46.46],
  "圣文森特和格林纳丁斯": [-61.10, 13.10],
  "萨摩亚": [-171.50, -13.50],
  "圣马力诺": [12.30, 43.55],
  "圣多美和普林西比": [6.39, 0.10],
  "沙特阿拉伯": [46.42, 24.41],
  "塞内加尔": [-17.29, 14.34],
  "塞拉利昂": [-13.17, 8.30],
  "斯洛伐克": [17.07, 48.10],
  "斯洛文尼亚": [14.33, 46.04],
  "所罗门群岛": [159.57, -9.27],
  "索马里": [45.25, 2.02],
  "比勒陀利亚": [28.12, -25.44],
  "西班牙": [-3.45, 40.25],
  "苏丹": [32.35, 15.31],
  "苏里南": [-55.10, 5.50],
  "斯威士兰": [31.06, -26.18],
  "瑞典": [18.03, 59.20],
  "瑞士": [7.28, 46.57],
  "阿拉伯叙利亚共和国": [36.18, 33.30],
  "塔吉克斯坦": [68.48, 38.33],
  "泰国": [100.35, 13.45],
  "马其顿": [21.26, 42.01],
  "多哥": [1.20, 6.09],
  "汤加": [-174.00, -21.10],
  "突尼斯": [10.11, 36.50],
  "土耳其": [32.54, 39.57],
  "土库曼斯坦": [57.50, 38.00],
  "图瓦卢": [179.13, -8.31],
  "乌干达": [32.30, 0.20],
  "乌克兰": [30.28, 50.30],
  "阿联酋": [54.22, 24.28],
  "英国": [-0.05, 51.36],
  "坦桑尼亚": [35.45, -6.08],
  "美国": [-77.02, 39.91],
  "美属维尔京群岛": [-64.56, 18.21],
  "乌拉圭": [-56.11, -34.50],
  "乌兹别克斯坦": [69.10, 41.20],
  "瓦努阿图": [168.18, -17.45],
  "委内瑞拉": [-66.55, 10.30],
  "越南": [105.55, 21.05],
  "南斯拉夫": [20.37, 44.50],
  "赞比亚": [28.16, -15.28],
  "津巴布韦": [31.02, -17.43]
};
const WorldMapChart: React.FC<any> = (props) => {
  const [chartOption, setChartOption] = useState({});
  let BJData = [
    [{
      name: "尼日利亚",
      value: 9100
    }, {
      name: "北京"
    }],
    [{
      name: "美国洛杉矶",
      value: 2370
    }, {
      name: "北京"
    }],
    [{
      name: "香港邦泰",
      value: 3130
    }, {
      name: "北京"
    }],
    [{
      name: "美国芝加哥",
      value: 2350
    }, {
      name: "北京"
    }],
    [{
      name: "加纳库马西",
      value: 5120
    }, {
      name: "北京"
    }],
    [{
      name: "英国曼彻斯特",
      value: 3110
    }, {
      name: "北京"
    }],
    [{
      name: "德国汉堡",
      value: 6280
    }, {
      name: "北京"
    }],
    [{
      name: "哈萨克斯坦阿拉木图",
      value: 7255
    }, {
      name: "北京"
    }],
    [{
      name: "俄罗斯伊尔库茨克",
      value: 8125
    }, {
      name: "北京"
    }],
    [{
      name: "巴西",
      value: 3590
    }, {
      name: "北京"
    }],
    [{
      name: "埃及达米埃塔",
      value: 3590
    }, {
      name: "北京"
    }],
    [{
      name: "西班牙巴塞罗纳",
      value: 3590
    }, {
      name: "北京"
    }],
    [{
      name: "柬埔寨金边",
      value: 3590
    }, {
      name: "北京"
    }],
    [{
      name: "意大利米兰",
      value: 3590
    }, {
      name: "北京"
    }],
    [{
      name: "乌拉圭蒙得维的亚",
      value: 3590
    }, {
      name: "北京"
    }],
    [{
      name: "莫桑比克马普托",
      value: 3590
    }, {
      name: "北京"
    }],
    [{
      name: "阿尔及利亚阿尔及尔",
      value: 3590
    }, {
      name: "北京"
    }],
    [{
      name: "阿联酋迪拜",
      value: 3590
    }, {
      name: "北京"
    }],
    [{
      name: "匈牙利布达佩斯",
      value: 3590
    }, {
      name: "北京"
    }],
    [{
      name: "澳大利亚悉尼",
      value: 3590
    }, {
      name: "北京"
    }],
    [{
      name: "美国加州",
      value: 3590
    }, {
      name: "北京"
    }],
    [{
      name: "澳大利亚墨尔本",
      value: 3590
    }, {
      name: "北京"
    }],
    [{
      name: "墨西哥",
      value: 3590
    }, {
      name: "北京"
    }],
    [{
      name: "加拿大温哥华",
      value: 3590
    }, {
      name: "北京"
    }]
  ];
  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = geoCoordMap[dataItem[0].name];
      var toCoord = geoCoordMap[dataItem[1].name];
      if (fromCoord && toCoord) {
        res.push({
          fromName: dataItem[0].name,
          toName: dataItem[1].name,
          coords: [fromCoord, toCoord],
          value: dataItem[0].value
        });
      }
    }
    return res;
  };
  const resolveData = () => {


    var series = [];
    [
      ["北京", BJData]
    ].forEach(function (item, i) {
      series.push({
        name: item[2],
        type: "lines",
        zlevel: 2,
        effect: {
          show: true,
          // //飞机的速度  这里是s单位
          period: 6,
          trailLength: 0,
          symbol: planePath,
          // 飞机大小
          symbolSize: 16
        },
        lineStyle: {
          color: "#ff8800",
          // 线条宽度
          width: 1,
          opacity: 1,
          curveness: 0.2
        },
        label: {
          show: false,
          position: 'middle',
          formatter: '{b}'
        },
        data: convertData(item[1])
      }, {
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: "stroke", //波纹绘制方式 stroke, fill
          scale: 4 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: false,
            position: "right", //显示位置
            offset: [5, 0], //偏移设置
            formatter: "{b}", //圆环显示文字
            textStyle: {
              color: "red"
            }
          },
          emphasis: {
            show: true
          }
        },
        symbol: "circle",
        symbolSize: function (val) {
          return 4 + val[2] / 1000; //圆环大小
        },
        itemStyle: {
          normal: {
            show: false
          }
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
          };
        })
      },
        //被攻击点
        {
          type: "scatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            period: 4,
            brushType: "stroke",
            scale: 4
          },
          label: {
            normal: {
              show: true,
              position: "right",
              color: "#00ffff",
              formatter: "{b}",
              textStyle: {
                color: "#0bc7f3"
              }
            },
            emphasis: {
              show: true
            }
          },
          symbol: "pin",
          symbolSize: 30,
          itemStyle: {
            normal: {
              show: true,
              color: "#9966cc"
            }
          },
          data: [{
            name: item[0],
            value: geoCoordMap[item[0]].concat([10])
          }]
        }
      );
    });
    let option: any = {
      backgroundColor: '#1B2631',
      tooltip: {
        trigger: "item",
        formatter: function (params, ticket, callback) {
          if (params.seriesType == "effectScatter") {
            return params.marker + params.data.name + "" + params.data.value[2];
          } else if (params.seriesType == "lines") {
            return params.data.fromName + " -> " + params.data.toName + "<br />" + params.data.value;
          } else {
            return params.name;
          }
        },
      },
      geo: {
        map: "world",
        label: {
          emphasis: {
            show: false
          }
        },
        roam: true, //是否允许缩放
        layoutCenter: ["50%", "50%"], //地图位置
        layoutSize: "130%",
        itemStyle: {
          normal: {
            color: "rgba(48,97,186,0.3)", //地图背景色
            borderColor: "rgba(0, 0, 0, 0)" //省市边界线
          },
          emphasis: {
            color: "rgba(48,97,186,0.3)" //悬浮背景
          }
        }
      },

      series: series
    };;
    if (props.series && props.series instanceof Array) {
      series = props.series.map((item: any) => merge({}, item));
    }
    option.series = series;
    setChartOption(option);
  };

  const getOption = () => {
    return cloneDeep(chartOption);
  };

  useEffect(() => {
    resolveData();
  }, [props.loading]);
  return (
    <ReactECharts
      echarts={echarts}
      {...props}
      option={getOption()}
      notMerge={true}
    />
  );
};

export default WorldMapChart;
